<template>
    <div class="details">
        <div class="top">

            <van-icon name="arrow-left" @click="back" />
            <h3>SHUN-Z</h3>
        </div>
        <div class="content">
            <ul>
                <li>
                    <p>试卷名称:</p>
                    <span>{{ examList.name }}</span>
                </li>
                <li>
                    <p>分类:</p>
                    <span>{{ examList.text }}</span>
                </li>
                <li>
                    <p>满分:</p>
                    <span>{{ examList.total }}</span>
                </li>
                <li>
                    <p>及格线:</p>
                    <span>{{ examList.passline }}</span>
                </li>
                <li>
                    <p>时间:</p>
                    <span>{{ examList.time }}</span>
                </li>
            </ul>
            <van-button type="primary" @click="toTest">开始考试</van-button>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import api from '../api/request'
import commen from '../commen/index'
import { showConfirmDialog,showToast } from 'vant';

const $route = useRoute()
const $router = useRouter()

let examList: any = ref({})
let eid = $route.query.eid
// 获取携带的eid拿到考试信息
if (eid) {
    api.exam_list({ eid: eid })
        .then(res => {
            if (res.code == 200) {
                // 拿到数据赋值到examList
                examList.value = res.result[0]
                // 时间格式化
                examList.value.time = commen.procesTime(examList.value.time)
            }
        })
}
// 



// 跳转返回上一级目录
const back = () => {
    $router.go(-1)
}
// 跳转考试页面
const toTest = () => {
    showConfirmDialog({
        title: '确定要开始考试吗',
        message:
            '准备好了吗？',
    })
        .then(() => {
            $router.push({ name: 'test', query: { eid: eid } })
            showToast({
                message: '你已进入考试',
                icon: 'good-job-o',
            });

        })
        .catch(() => {
            // on cancel
            showToast('取消成功');
        });
}
</script>

<style lang="less" scoped>
@import url(../assets/appColor.less);

.details {
    .top {
        position: relative;

        i {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            top: 15px;
            left: 0;
        }

        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: @bgcolor;
        text-align: center;

        h3 {
            font-size: 25px;
            font-weight: bold;
        }
    }

    .content {
        padding: 20px;

        ul {
            li {
                margin-bottom: 30px;
                display: flex;
                align-items: center;

                p {
                    font-size: 25px;
                    margin-right: 20px;
                }

                span {
                    font-size: 25px;
                    font-weight: bold;
                }
            }
        }

        button {
            margin-top: 30px;
        }
    }
}
</style>